<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-07-08 23:19:33
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-07-08 23:29:15
 * @FilePath: \react\02.虚拟DOM创建的两种方式\2.使用js创建虚拟DOM.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>2.使用js创建虚拟DOM</title>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root"></div>

    <script type="text/javascript">
        //1.创建虚拟DOM
        const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello.React,js'))
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('root'))

    </script>
</body>

</html>